<template>
    <!-- 事实外包方高级搜索 -->
    <div class="searchDialog">
        <div class="e-form">
            <el-form label-width="120px" :model="searchForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="外包商类型：">
                            <el-checkbox
                                :indeterminate="isIndeterminate"
                                v-model="checkAll"
                                @change="handleCheckAllChange"
                                >全选</el-checkbox
                            >
                            <el-checkbox-group
                                v-model="searchForm.subcontractorTypeKey"
                                @change="handleCheckedCitiesChange"
                            >
                                <el-checkbox
                                    v-for="item in typeList"
                                    :key="item.kvId"
                                    :label="item.kvKey"
                                    :value="item.kvId"
                                ></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态：">
                            <el-checkbox
                                :indeterminate="isIndeterminate2"
                                v-model="checkAll2"
                                @change="handleCheckAllChange2"
                                >全选</el-checkbox
                            >
                            <el-checkbox-group
                                v-model="searchForm.stateTypeKey"
                                @change="handleCheckedCitiesChange2"
                            >
                                <el-checkbox
                                    v-for="item in stateList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="外包商名称："
                            prop="subcontractorName"
                        >
                            <el-input
                                v-model="searchForm.subcontractorName"
                                placeholder="请填写"
                                maxlength="100"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="统一社会信用代码：">
                            <el-input
                                v-model="searchForm.creditCode"
                                placeholder="请填写"
                                maxlength="18"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="管理单位：">
                            <el-input
                                v-model="searchForm.manageOrgName"
                                placeholder="请选择"
                                readonly
                            >
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-document-copy"
                                    @click="onSelectOrg"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div style="display: none">{{ localSearchData }}</div>
    </div>
</template>

<script>
import call from '@/api/OutsourcingartyAdmin/getAllType.js'
import { selectDataClient } from '@/utils/common'
import { mapMutations } from 'vuex'
export default {
    data () {
        return {
            searchForm: {
                subcontractorTypeKey: [], //外包商类型id
                subcontractorTypeValue: [], //外包商类型名称
                subcontractorName: '', //外包商名称
                creditCode: '', //统一社会信用代码
                stateTypeKey: [], //状态id
                stateTypeValue: [], //状态名称
                manageOrg: localStorage.getItem('searchOrgId'), //管理单位id
                manageOrgName: localStorage.getItem('searchOrgName'), //管理单位name
            },
            type: '', //合同名称：1，分包合同,2，其他合同,3，服务采购合同
            isIndeterminate: true, //分包商类型
            isIndeterminate1: true, //信用等级
            isIndeterminate2: true, //状态
            checkAll: false, //分包商类型
            checkAll1: false, //信用等级
            checkAll2: false, //状态
            typeList: [],
            // 状态
            stateList: [
                { id: 0, name: '草稿' },
                { id: 1, name: '审核中' },
                { id: 2, name: '已审核' },
                { id: 3, name: '已作废' }
            ]
        }
    },
    created () {
        this.type = this.$route.query.type
        this.getTypeData() //进入页面获取类型选择框数据
    },
    computed: {
        localSearchData () {
            // 默认设置搜索标志为false，则不进行搜索回调
            const searchForm = this.searchForm
            searchForm.searching = false
            this.setSearchData(searchForm)
            return searchForm
        }
    },
    methods: {
        ...mapMutations(['setSearchData']),
        ...mapMutations(['setSelectedInfo']),
        //获取分包商类型数据
        getTypeData () {
            call.getCredentialTree({ name: '外包方类型', id: '0' }).then(
                res => {
                    // 获取想要的类型id
                    this.typeList = res
                }
            )
            call.getCredential('纳税类别').then(res => {
                this.payTaxesTypeList = res
            })
        },
        // 外包方类型全选
        handleCheckAllChange (val) {
            this.searchForm.subcontractorTypeValue = []
            this.searchForm.subcontractorTypeKey = val
                ? this.typeList.map(item => {
                    return item.kvKey
                })
                : []
            this.isIndeterminate = false
            // 循环拿到id
            this.typeList.map(item => {
                this.searchForm.subcontractorTypeValue.push(item.kvValue)
            })
        },
        //外包方类型选择
        handleCheckedCitiesChange (value) {
            this.searchForm.subcontractorTypeValue = []
            let checkedCount = value.length
            this.checkAll = checkedCount === this.typeList.length
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.typeList.length
            // 循环拿到id
            this.typeList.map(item => {
                value.map(Valitem => {
                    if (item.kvKey == Valitem) {
                        this.searchForm.subcontractorTypeValue.push(
                            item.kvValue
                        )
                    }
                })
            })
        },
        // 状态
        handleCheckAllChange2 (val) {
            this.searchForm.stateTypeValue = []
            this.searchForm.stateTypeKey = val
                ? this.stateList.map(item => {
                    return item.id
                })
                : []
            this.isIndeterminate2 = false
            // 循环拿到id
            this.stateList.map(item => {
                this.searchForm.stateTypeValue.push(item.id)
            })
        },
        //状态
        handleCheckedCitiesChange2 (value) {
            this.searchForm.stateTypeValue = []
            let checkedCount = value.length
            this.checkAll2 = checkedCount === this.stateList.length
            this.isIndeterminate2 =
                checkedCount > 0 && checkedCount < this.stateList.length
            // 循环拿到id
            this.stateList.map(item => {
                value.map(Valitem => {
                    if (item.name == Valitem) {
                        this.searchForm.stateTypeValue.push(item.id)
                    }
                })
            })
        },
        onSelectOrg () {
            selectDataClient({
                SelectServiceToken: '/hr/org/getChildrenOrg', // 客户端对应方法名
                IsSingleMode: false, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id(注意：是上一次已选中的id，不是要传的参数，如果第一次选，则传[])
                InitParamsStr: '', // 接口参数(name为模拟参数)
                Title: '选择机构' // 标题
            }).then(val => {
                this.searchForm.manageOrg = [val[0].orgId]
                this.searchForm.manageOrgName = [val[0].orgName]
            })
        }
    }
}
</script>

<style lang="scss" scoped>
//复选框css
::v-deep .el-checkbox {
    margin: 0px 20px 5px 0px;
}
// label
::v-deep .e-form .el-form-item .el-form-item__label {
    width: 140px !important;
}
// 境外单位
::v-deep .clearPadding .vxe-cell {
    padding: 0;
}
::v-deep .clearPaddingLeft .vxe-cell {
    padding-left: 0px;
}
::v-deep {
    .main-el-switch {
        position: relative;
        .el-switch__core {
            height: 24px;
            border-radius: 12px;
            &:after {
                left: 4px;
                top: 3px;
            }
        }
        &.el-switch {
            &.is-checked {
                .el-switch__core {
                    &:after {
                        margin-left: -20px;
                        left: 100%;
                    }
                }
            }
        }
        &.is-checked {
            .el-switch__label--left {
                opacity: 0;
            }
            .el-switch__label--right {
                opacity: 1;
            }
        }
        .el-switch__label {
            position: absolute;
            top: 0;
        }
        .el-switch__label--left {
            right: 0;
            color: #999;
            z-index: 1;
            margin-right: 8px;
        }
        .el-switch__label--right {
            left: 0;
            color: #fff;
            opacity: 0;
            margin-left: 8px;
        }
    }
    // 统一样式
    .searchDialog {
        padding-top: 20px;
        ::v-deep.el-input--suffix {
            i {
                display: flex;
                align-items: center;
            }
        }
        .el-checkbox-group {
            display: flex;
        }
        ::v-deep.el-checkbox {
            display: flex;
            align-items: center;
        }
    }
}
</style>
